<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column fixed="left" type="index" width="55">序号</el-table-column>
      <el-table-column prop="userid" label="用户ID"></el-table-column>
      <el-table-column prop="studentid" label="用户学号"></el-table-column>
      <el-table-column prop="username" label="用户名"></el-table-column>
      <el-table-column prop="class_name" label="班级名称"></el-table-column>
      <el-table-column prop="grade" label="年级"></el-table-column>
      <el-table-column prop="major_name" label="专业名称"></el-table-column>
      <el-table-column prop="college_name" label="学院名称"></el-table-column>
      <el-table-column prop="school_name" label="学校名称"></el-table-column>
      <el-table-column prop="choose_time" label="选课时间"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="onShowExperScore(scope.row)" size="small" class="text-button" >实验成绩</el-button>
          <el-button @click="onShowExamScore(scope.row)" size="small" class="text-button" >考试成绩</el-button>
          <el-button @click="onShowEvent(scope.row, 'course')" size="small" class="text-button" >上课记录</el-button>
          <el-button @click="onShowEvent(scope.row, 'experiment')" size="small" class="text-button" >实验记录</el-button>
          <el-button @click="onShowEvent(scope.row, 'exam')" size="small" class="text-button" >考试记录</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next, jumper"
      @current-change="handleCurrentChange"
      @size-change=handleSizeChange
      :current-page.sync="search.page"
      :page-size="search.page_size"
      :total="total"
    ></el-pagination>
    <el-dialog
      :close-on-click-modal="false"
      @close="onClose"
      :visible.sync="showExpers"
    >
      <el-table :data="reports" style="width: 100%">
          <el-table-column prop="id" label="序号"></el-table-column>
          <el-table-column prop="title" label="实验报报告名称" ></el-table-column>
          <el-table-column prop="experiment" label="所属实验" ></el-table-column>
          <el-table-column prop="knowledges" label="关联知识点" ></el-table-column>
          <el-table-column prop="score" label="得分" ></el-table-column>
        </el-table>
    </el-dialog>
    <el-dialog
      :close-on-click-modal="false"
      @close="onClose"
      :visible.sync="showExams"
    >
      <el-table :data="papers" style="width: 100%">
        <el-table-column prop="id" label="序号"></el-table-column>
        <el-table-column prop="exam_id" label="考试编号" ></el-table-column>
        <el-table-column prop="exam_name" label="试卷名称" ></el-table-column>
        <el-table-column prop="start_time" label="考试时间" ></el-table-column>
        <el-table-column prop="duration" label="考试时长" ></el-table-column>
        <el-table-column prop="score" label="得分" ></el-table-column>
      </el-table>

    </el-dialog>
    <el-dialog
      :close-on-click-modal="false"
      @close="onClose"
      :visible.sync="showEvent"
      :title="eventTitle"   
    >
      <el-table :data="events" style="width: 100%">
        <el-table-column prop="username" label="姓名" ></el-table-column>
        <el-table-column prop="detail" label="行为" ></el-table-column>
        <el-table-column prop="create_ts" label="时间" ></el-table-column>
      </el-table>
      <el-pagination
        background
        layout="prev, pager, next"
        @current-change="handleEventPageChange"
        :current-page.sync="eventSearch.page"
        :page-size="eventSearch.page_size"
        :total="eventsTotal"
      ></el-pagination>
    </el-dialog>
  </div>
</template>
<script>
import pageMixin from "@/mixins/pageMixin";
import { courseModel, experimentModel, paperModel, eventModel } from "@/api/models";
// import ListExamScore from '@/modals/ListExperScore'

export default {
  mixins: [pageMixin],
  components: {},
  data() {
    return {
      visible: false,
      tableData: [],
      total: 0,
      showExpers: false,
      showExams: false,
      showStuId: null,
      showEvent: false,
      search: {},
      reports: [],
      papers: [],
      events: [],
      eventTitle: '上课记录',
      eventSearch: {
        page: 1,
        page_size: 10
      },
      getEventsPram: {},
      eventsTotal: 0
    };
  },
  props: {
    course_id: {
      type: [Number, String],
      default: null
    }
  },
  watch: {
    course_id () {
      this.getList();
    }
  },
  methods: {
    getList(){
     courseModel.students(
        this.course_id,
        this.search,
        res => {
          this.total = res.total_records;
          this.tableData = res.data.map(v => {
            return v;
          });
        },
        err => {
          console.log(err);
        }
      );
    }, 
    onShowExperScore(row) {
      console.log(row);
      this.showStuId = row.userid;
      this.showExpers = true;
      experimentModel.reports(this.course_id, row.userid, res => {
        console.log(res)
        this.reports = res.data;
      })
    },
    onShowExamScore(row) {
      console.log(row);
      this.showStuId = row.userid;
      this.showExams = true;
      paperModel.list({
        course_id: this.course_id,
        studentid: this.showStuId
      }, res => {
        console.log(res)
        this.papers = res.data;
      })
    },
    onShowEvent(row, type) {
      this.showEvent = true;
      switch(type){
        case 'course':
          this.eventTitle = '上课记录'
          break;
        case 'experiment':
          this.eventTitle = '实验记录'
          break;
        case 'exam':
          this.eventTitle = '考试记录'
          break;
        default: 
          this.eventTitle = '上课记录'
      }
      this.getEventsPram = {
        userid: row.userid,
        event_type: type,
        course_id: this.course_id,
      }
      this.getEvents()
    },
    getEvents() {
      eventModel.list({
        ...this.getEventsPram,
        page: this.eventSearch.page
      }, res => {
        this.events = res.data
        this.eventsTotal = res.total_records
      })
    },
    handleEventPageChange() {
      this.getEvents()
    },
    onClose() {
      this.showExpers = false;
      this.showExams = false;
    }
  }
};
</script>
<style lang="scss" scoped>
.el-dialog__body .el-input{
  width: auto !important;
}
</style>